<template>
  <el-row type="flex" class="header" style="margin-top: 50px">
    <!-- 左侧区域 -->
    <el-row class="left">
      <el-row>
        <el-col :span="3">区域：</el-col>
        <el-col :span="21">
          <div :class="{ yichu: isShow }">
            <nuxt-link
              to="/#"
              class="jingdian"
              v-for="(item, index) in $store.state.hotel.cityScenic"
              :key="index"
              >{{ item.name }}</nuxt-link
            >
          </div>
          <a href="#" @click="isShow = !isShow">
            <i
              class="el-icon-d-arrow-right"
              :class="[isShow ? 'stylv' : 'stylv1']"
            ></i>
            等个区域
          </a>
        </el-col>
      </el-row>
      <!-- 均价 -->
      <el-row class="huangguan">
        <el-col :span="3"> 均价 <el-badge class="mark" value="?" />: </el-col>
        <el-col :span="21">
          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价,设施和服务等各方面水平的综合评估"
            placement="bottom-start"
          >
            <span>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>￥332
            </span>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价,设施和服务等各方面水平的综合评估"
            placement="bottom-start"
          >
            <span>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>￥532
            </span>
          </el-tooltip>
          <el-tooltip
            class="item"
            effect="dark"
            content="等级评定是针对房价,设施和服务等各方面水平的综合评估"
            placement="bottom-start"
          >
            <span>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>
              <i class="iconfont iconhuangguan"></i>￥882
            </span>
          </el-tooltip>
          <span>{{ mapdata }}</span>
        </el-col>
      </el-row>
    </el-row>

    <!-- 右边组件 -->
    <el-row
      class="right"
      id="ditu"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
    ></el-row>
    <p id="info"></p>
  </el-row>
</template>

<script>
import { citiesList } from "@/utils/hotel";
export default {
  props: {
    hotelLocation: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      isShow: true,
      //定位到的数据
      dingwei: {},
      cityName: "",
      cityId: "",
      //定位位置的景点
      jingdian: [],
      loading: true,
    };
  },
  mounted() {
    //高德地图
    var url =
      "https://webapi.amap.com/maps?v=1.4.15&key=bbe9a00c0951c9d7a8c5bc3c985f8799&callback=onLoad";
    var jsapi = document.createElement("script");
    jsapi.charset = "utf-8";
    jsapi.src = url;
    document.head.appendChild(jsapi);
    window.onLoad = () => {
      var map = new AMap.Map("ditu", {
        resizeEnable: true,
      });
      //使用城市定位插件

      AMap.plugin("AMap.CitySearch", () => {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(async (status, result) => {
          console.log(status, result);
          if (status === "complete" && result.info === "OK") {
            // 查询成功，result即为当前所在城市信息
            if (!this.$route.query.cityName) {
              this.$confirm(
                `当前定位为
            ${result.city}`,
                "提示",
                {
                  confirmButtonText: "确定",
                  showCancelButton: false,
                  type: "success",
                }
              );
            }

            this.cityName = result.city;
            this.cityId = result.infocode;
            //地图显示当前位置
            map.setBounds(result.bounds);
            let res = await citiesList(this.cityName);
            console.log(res);
            //利用vuex将获取的城市景点存储起来,进入页面获取到城市定位后,同时也会获取到城市景点
            this.jingdian = res.data.data[0].scenics;
            this.$store.commit("hotel/setcityScenic", res.data.data[0].scenics);
            this.$emit("cityId", this.jingdian[0].city);
            this.$router.push({
              name: "hotel",
              query: { city: this.jingdian[0].city, cityName: result.city },
            });
          }
        });
      });
    };
  },
  methods: {},
  computed: {
    mapdata() {
      console.log(this.hotelLocation);
      if (this.hotelLocation == 0) return;
      let list = [];
      //改造父组件传过来的数组,将数组中的经纬度拿到,并添加name属性
      let arr = this.hotelLocation.map((v) => {
        return {
          jing: v.location.longitude,
          wei: v.location.latitude,
          name: v.name,
        };
      });
      console.log(arr);
      //遍历arr数组添加点标记
      arr.forEach((item, index) => {
        // console.log(item);
        var marker = new AMap.Marker({
          position: new AMap.LngLat(item.jing, item.wei), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          title: item.name,
          content: `<span class='marker'>${index + 1}</span>`,
        });
        //添加点标记文本内容
        marker.setLabel({
          offset: new AMap.Pixel(0, 0), //设置文本标注偏移量
          content: "<div class='info'>" + item.name + "</div>", //设置文本标注内容
          direction: "right", //设置文本标注方位
        });
        //将每一个点标记添加到list数组中
        list.push(marker);
      });
      //显示地图
      var map = new AMap.Map("ditu", {
        resizeEnable: true,
      });
      //将数组添加到地图中去
      map.add(list);

      // 自动适配到合适视野范围
      // 无参数，默认包括所有覆盖物的情况
      map.setFitView();
      // return "";
    },
  },
};
</script>

<style lang="less" scoped>
.header {
  width: 1000px;
  color: #666;
  font-size: 14px;
  .left {
    width: 590px;
    height: 100%;
    padding: 0 10px;
    i {
      color: #ff9900;
    }
  }
  .right {
    width: 410px;
    height: 260px;
  }
  .yichu {
    height: 42px;
    overflow: hidden;
  }
  .stylv {
    transform: rotate(270deg);
  }
  .stylv1 {
    transform: rotate(90deg);
  }
  /deep/.el-icon-question {
    margin-left: 10px;
  }
  /deep/.el-badge__content {
    position: relative;
    top: -5px;
    left: 0;
    background-color: #ccc;
  }
  /deep/.huangguan {
    margin-top: 15px;
    span {
      padding-right: 20px;
    }
    i {
      color: #ff9900;
    }
  }

  #info {
    // width: 200px;
    // height: 30px;
    background-color: #fcf9f2;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
    border-bottom-right-radius: 100px;
  }
  .jingdian {
    padding-right: 4px;
    margin-right: 14px;
  }
  /deep/.amap-marker-label {
    border: 0;
    background-color: #fff;
  }
  /deep/.marker {
    display: inline-block;
    width: 22px;
    height: 36px;
    background-image: url(https://webapi.amap.com/theme/v1.3/markers/b/mark_b.png);
    background-size: 22px 36px;
    text-align: center;
    line-height: 24px;
    color: #fff;
  }
}
</style>